<template>
	<el-card>
		<el-form :inline="true" :model="state.queryForm" @keyup.enter="getDataList()">
			<el-form-item>
				<el-input v-model="state.queryForm.clueTitle" placeholder="线索名称" clearable></el-input>
			</el-form-item>
			<el-form-item>
				<el-button @click="getDataList()">查询</el-button>
			</el-form-item>
			<el-form-item>
				<el-button v-auth="'sys:customerclue:save'" type="primary" @click="addOrUpdateHandle()">新增</el-button>
			</el-form-item>
			<el-form-item>
				<el-button v-auth="'sys:customerclue:delete'" type="danger" @click="deleteBatchHandle()">删除</el-button>
			</el-form-item>
		</el-form>
		<el-table v-loading="state.dataListLoading" :data="state.dataList" border style="width: 100%" @selection-change="selectionChangeHandle">
			<el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
			<el-table-column prop="clueTitle" label="线索名称" header-align="center" align="center"></el-table-column>
			<el-table-column prop="clueArea" label="线索区域" dict-type="user_gender"></el-table-column>
			<el-table-column prop="industryType" label="行业类别" header-align="center" align="center"></el-table-column>
			<el-table-column prop="clueChat" label="微信号" header-align="center" align="center"></el-table-column>
			<el-table-column prop="clueTel" label="联系电话" header-align="center" align="center"></el-table-column>
			<el-table-column prop="clueStatus" label="状态" header-align="center" align="center">
				<template #default="scope">
					<span v-if="scope.row.clueStatus ==1" class="fontcl">失效</span>
					<span v-if="scope.row.clueStatus ==0" class="fontc2">正常</span>
				</template>
			</el-table-column>
			<el-table-column label="操作" fixed="right" header-align="center" align="center" width="150">
				<template #default="scope">
					<el-button v-auth="'sys:customerclue:add'" type="primary" link @click="addCustomer(scope.row)">抢客户</el-button>
					<el-button v-auth="'sys:customerclue:update'" type="primary" link @click="addOrUpdateHandle(scope.row)">修改</el-button>
					<el-button v-auth="'sys:customerclue:delete'" type="primary" link @click="deleteBatchHandle(scope.row.id)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		<el-pagination
			:current-page="state.page"
			:page-sizes="state.pageSizes"
			:page-size="state.limit"
			:total="state.total"
			layout="total, sizes, prev, pager, next, jumper"
			@size-change="sizeChangeHandle"
			@current-change="currentChangeHandle"
		>
		</el-pagination>
		<!-- 弹窗, 新增 / 修改 -->
		<add-or-update ref="addOrUpdateRef" @refresh-data-list="getDataList"></add-or-update>
	</el-card>
</template>

<script setup lang="ts" name="SysUserIndex">
import { useCrud } from '@/hooks'
import { reactive, ref } from 'vue'   
import { ElMessageBox } from 'element-plus';
import AddOrUpdate from './add-or-update.vue'
import { IHooksOptions } from '@/hooks/interface'
import constant from '@/utils/constant'
import { ElMessage, UploadProps } from 'element-plus'
import {useCustomerSubmitApi,useCustomerApi} from '@/api/sys/customer'
import {useCustomerClueSubmitApi,useCustomerClueApi} from '@/api/sys/customerclue'
const emit = defineEmits(['refreshDataList'])
const state: IHooksOptions = reactive({
	dataListUrl: '/sys/customerclue/selpage',
	deleteUrl: '/sys/customerclue',
	queryForm: {
		clueTitle: ''
	}
})

const addOrUpdateRef = ref()
const addOrUpdateHandle = (obj?:any) => {
	addOrUpdateRef.value.init(obj)
}
const saveCustomer=(param:any)=>{
	useCustomerSubmitApi(param).then((res:any) => {
			ElMessage.success({
				message: '操作成功',
				duration: 500,
			})
			getDataList();
	})
}
const addCustomer=(obj:any)=>{
	let param={id:obj.id,deleted:1}
	ElMessageBox.confirm('确定执行此操作吗？', '提示', {
           confirmButtonText: '确定',
           cancelButtonText: '取消',
           type: 'warning'
         }).then(() => {
           // 确定按钮被点击的回调
			useCustomerClueSubmitApi(param).then((res:any) => {
				let cusparam={customerName:obj.clueTitle,customerType:obj.industryType
				,customerChat:obj.clueChat,customerTel:obj.clueTel,customerStatus:1,
				customerArea:obj.clueArea,deleted:0,
				userId:localStorage.getItem('userCd'),userName:localStorage.getItem('realName')}
				saveCustomer(cusparam);
			})
         }).catch(() => {
           // 取消按钮被点击的回调
           console.log('取消按钮被点击');
         });
}
const { getDataList, selectionChangeHandle, sizeChangeHandle, currentChangeHandle, deleteBatchHandle } = useCrud(state)
</script>

<style lang="scss" scoped>
.fontcl{
	color:red;
}
.fontc2{
	color:green;
}
</style>